<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:12:18
-->
<template>
  <div>
    <!-- 搜索按钮和下拉框 录入 -->
    <div class="table">
      <!-- {{ form }} -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-select clearable v-model="form.engineer_id" placeholder="请选择工程名称">
            <el-option label="山西农大主体育场工程" value="1"></el-option>
            <el-option label="太原理工大学一号教学楼工程" value="2"></el-option>
            <el-option label="兰州理工大学" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="form.device_id" placeholder="请选择设备名称">
            <el-option label="一号设备" value="1"></el-option>
            <el-option label="二号设备" value="2"></el-option>
            <el-option label="三号设备" value="3"></el-option>
            <el-option label="四号设备" value="4"></el-option>
            <el-option label="五号设备" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="form.status" placeholder="请选择工单状态">
            <el-option label="待接单" value="待接单"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="form.status" placeholder="请选择工单类型">
            <el-option label="维修" value="维修"></el-option>
            <el-option label="安装" value="安装"></el-option>
            <el-option label="拆机" value="拆机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table :data="empData" style="width: 100%;">
        <el-table-column type="index" :index="1" label="序号" align="center" width="80px">
        </el-table-column>
        <el-table-column prop="engineer_name" label="工程名称" align="center" width="200px">
        </el-table-column>
        <el-table-column prop="device_name" label="设备名称" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center" width="180px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time | fmtTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bill_why" label="问题描述" align="center" width="200px">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="80px">
          <template v-slot="scope">
            <div>
              <el-tag type="danger" v-if="scope.row.status === '待接单'">待接单</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status === '进行中'">进行中</el-tag>
              <el-tag type="success" v-else>已完成</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="工单类型" align="center" width="80px">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-button type="text" @click="toDetails(scope.row)">详情</el-button>
              <el-button type="text" v-if="scope.row.status === '待接单'" @click="toDelete(scope.row.id)">取消</el-button>
              <el-button type="text" v-else disabled>取消</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页按钮 -->
    <div class="page" style="margin-top: 15px;text-align: center;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next,jumper"
        :total="total" hide-on-single-page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {get,del} from '@/utils/request'
import { formatTime } from '@/utils';
export default {
  data() {
    return {
      // 表单对象
      form: {},
      // 设备数据
      empData:[],
      params:{
        page:1,
        pageSize:10,
      },
      // 总条数
      total: 0,
    };
  },
  computed: {},
  methods: {
    // 跳转到工单详情页面
    toDetails(row){
      // 路由跳转
      this.$router.push({
        path:"/am/order/Details",
        query:row,
      });
    },
    // 去取消待接单的工单
    toDelete(id){
      this.$confirm('此操作将删除该工单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // 发送删除请求
          let res = await del('/workorder/deleteById',{id});
          this.$message({
            type: 'success',
            message: '取消成功!'
          });
          this.params.page = 1;
          // 刷新页面 重新请求数据
          this.getempData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已放弃取消'
          });          
        });
    },
    // 查询数据
    async getempData(){
      // 搜索和分页查询同时处理
      let temp = {...this.form,...this.params};
      // console.log(temp,'----');
      for(let key in temp){
        if(!temp[key]){
          delete temp[key];
        };
      };
      // temp.pageSize = 100;
      // console.log(temp);
      let res = await get('/workorder/pageQuery',temp);
      // console.log(res);
      this.empData = res.data.list;
      this.total = res.data.total;
    },
    // 去搜索
    onSearch() {
      // 页码从1开始搜
      this.params.page = 1;
      this.getempData();
    },
    // 数据条数发生变化函数
    handleSizeChange(pageSize) {
      console.log(pageSize,'条数');
      // 当条数发生改变 重新请求工程数据
      this.params.pageSize = pageSize;
      // 重新请求工程数据
      this.getempData();
    },
    // 页码条数发生变化函数
    handleCurrentChange(page) {
      console.log(page,'页码');
      // 当页码发生改变 重新请求工程数据
      this.params.page = page;
      // 重新请求工程数据
      this.getempData();
    },
  },
  created() {
    this.getempData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>